<template>
	<view class="page">
		<view class="items" v-for="(items,index) in shiList" :key="items.id" @click="onselect(items ,index)"
			:class="[xuanzhong == index ? 'bgc' :'']">
			
			<view>{{items.name}}</view>
			<view style="color: red;" v-if="items.hasTowner == 1 && yishengQing == '已申请'">该镇已有电长</view>
		</view>
		<view class="compelet" @click="submit">
			提交
		</view>
		<u-modal v-model="show" title="提示" content='提交成功' @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				yishengQing:'',
				xuanzhong: null,
				form: {},
				shiList: [],
				shiquzheng: [],
				provinceId: '', //省id
			}
		},
		created() {
			// this.getUser()
		},
		onLoad(options) {
			this.shiquzheng = JSON.parse(options.data)
			this.getShiList(this.shiquzheng[1].id)
		},
		methods: {
			// 查询所在镇
			getShiList(id) {
				this.$axios.request(this.$api.ShiListApi, "GET", {
					pid: id,
					hasTowner: 1
				}).then((val) => {
					this.shiList = val.data
					console.log(this.shiList, 'this.shiList')
				})
			},
			// 选择镇
			onselect(items, index) {
				if (items.hasTowner == 1) {
					this.yishengQing = '已申请'
				} else {
					this.shiquzheng[2] = {
						...items
					}
					this.xuanzhong = index
				}
			
			},
			// 从用户信息中获取省id
			getUser() {
				this.$axios.request(this.$api.getUser, "POST").then((val) => {
					this.provinceId = val.data.provinceId
				})
			},
			submit() {
				if (this.shiquzheng[2] == null) {
					this.$msg.toast("请选择乡镇")
					return
				}
				console.log(this.shiquzheng[2], 'this.shiquzheng[2].id')
				uni.showModal({
					title: '提示',
					content: '您确认要申请当前镇的代理人吗？',
					cancelText: "取消",
					confirmText: "确认",
					confirmColor: '#ef111b',
					cancelColor: '#000000',
					success: function(res) {

						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.save()
						} else {
							// 执行取消后的操作
						}

						// 给弹框绑定this
					}.bind(this)
				})
			},
			// 请求接口
			save() {

				this.form = {
					provinceId: this.shiquzheng[3].provinceId,
					cityId: this.shiquzheng[0].id,
					districtId: this.shiquzheng[1].id,
					townId: this.shiquzheng[2].id
				}
				let  urlApi = null
				console.log(this.$store.state.userId)
				if(this.$store.state.userId) {
					urlApi = this.$api.postmanageAddTownerApi//管理员手动添加电长
					this.form.userId = this.$store.state.userId
				} else {
					urlApi = this.$api.TownMayorSubmit//代理自行申请添加电长
				}
				this.$axios.request(urlApi, "POST", this.form).then((val) => {
					if (val.msg == 'success') {
						this.show = true
						// this.$msg.toast("申请成功")
						// uni.showModal({
						// 	title: '提示',
						// 	content: '申请成功',
						// 	confirmText: "确认",
						// 	confirmColor: '#ef111b',
						// 	showCancel: false, //没有取消按钮的弹框
						//  cancelColor: '#000000',
						// 	success: function(res) {
						// 		//变量接this
						// 		var that = this
						// 		if (res.confirm) {
						// 			// 执行确认后的操作
						// 			uni.reLaunch({
						// 				url: '/pages/mine/index'
						// 			})
						// 		} else {
						// 			// 执行取消后的操作
						// 		}

						// 		// 给弹框绑定this
						// 	}.bind(this)
						// })
					}
				})
				this.$store.commit("setShowuSerId",'' )
			},
			confirm() {
				uni.reLaunch({
					url:'/pages/mine/index'
				})
			}
		},
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: auto;
		padding-bottom: 140rpx;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 24rpx;
		height: 60rpx;
		/* background-color: red; */
		border-bottom: 2rpx solid #eee;
		line-height: 60rpx;
	}

	.compelet {
		position: fixed;
		left: 32rpx;
		bottom: 60rpx;
		width: 686rpx;
		height: 80rpx;
		background-color: #2E6ADF;
		opacity: 1;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: "PingFang SC";
		font-weight: 400;
		line-height: 80rpx;
		margin: 60rpx auto 0;
		text-align: center;
		color: #FFFFFF;
		opacity: 1;

	}

	.bgc {
		background-color: #eee;
	}
</style>
